<template>
<el-drawer :title="drawer.title" :visible.sync="drawer.visible" direction="rtl" custom-class="drawer-right-side" size="70%" :withHeader="false">
    <div class="drawer-box">
        <div class="page-header">
            <div class="left">
                <div class="avatar-group">
                    <el-avatar class="avatar-left" shape="square" :size="50" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
                    <div class="avatar-right">
                        <div class="fullname">
                            {{ customer.fullname ? customer.fullname : '未知' }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="right">
                <el-button-group>
                    <el-button type="primary" style="float: right" icon="el-icon-close" @click="closeDrawer"></el-button>
                </el-button-group>
            </div>
        </div>
        <div class="customer-common">
            <div class="flex-table">
                <div class="flex-row header">
                    <div class="flex-col">渠道</div>
                    <div class="flex-col">回访状态</div>
                    <div class="flex-col">创建人</div>
                    <div class="flex-col right">创建时间</div>
                </div>
                <div class="flex-row">
                    <div class="flex-col">{{customer.source.title}}</div>
                    <div class="flex-col">
                        <el-link type="warning">{{customer.visit_status.title}}</el-link>
                    </div>
                    <div class="flex-col">
                        {{customer.creator.realname}}
                        <el-tag type="danger" v-if="customer.creator.status==0">已离职</el-tag>
                    </div>
                    <div class="flex-col right">{{customer.create_time}}</div>
                </div>
            </div>
        </div>
        <div class="tab-box">
            <el-tabs v-model="activeName" @tab-click="changeTab">
                <el-tab-pane label="客户信息" name="customer">
                    <contact-list :contactList="contacts"></contact-list>
                    <source-list :sourceList="sources"></source-list>
                </el-tab-pane>

                <el-tab-pane label="跟进记录" name="visit">
                    <owner-list :ownerList="owners"></owner-list>
                    <visit-list :visitList="visits"></visit-list>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</el-drawer>
</template>

<script>
import {
    getMemberDetailApi,
} from "@/api/customer/member.js";
import {
    getVisitGroupApi
} from '@/api/customer/visit.js'

import contactList from '@/views/customer/member/components/contact-list'
import productList from '@/views/customer/member/components/product-list'
import sourceList from '@/views/customer/member/components/source-list'
import ownerList from '@/views/customer/member/components/owner-list'
import visitList from '@/views/customer/member/components/visit-list'

export default {
    components: {
        contactList,
        productList,
        ownerList,
        sourceList,
        visitList
    },
    data() {
        return {
            drawer: {
                title: "客资详情",
                visible: false,
            },
            activeName: "customer",
            customer: {
                source: {
                    id: "",
                    title: ""
                },
                creator: {
                    id: "",
                    realname: ""
                },
                visit_status: {
                    id: "",
                    title: ""
                }
            },
            favorites: [], // 收藏信息
            contacts: [], // 联系方式
            products: [], // 意向产品
            visits: [], // 回访历史
            owners: [], // 跟踪者
            sources: [], // 重复渠道
        };
    },
    methods: {
        showDrawer(row) {
            this.drawer.visible = true;
            this.activeName = "customer";
            this.getMemberDetail(row.id);
        },
        getMemberDetail(id) {
            getMemberDetailApi({
                member_id: id
            }).then(res => {
                if (res.code != '200') {
                    this.$message.error(res.msg);
                    return;
                }
                // 客资详情
                this.customer = res.data.member;
                // 收藏信息

                // 联系电话
                this.contacts = res.data.contacts;
                // 意向产品
                this.products = res.data.products;
                this.sources = res.data.sources;

            }).catch(res => {
                this.$message.error("页面异常，按f5刷新重试");
            });
        },
        closeDrawer() {
            this.drawer.visible = false;
        },
        changeTab() {
            switch (this.activeName) {
                case "visit":
                    this.getVisitGroup();
                    break;
            }
        },
        getVisitGroup() {
            getVisitGroupApi({
                member_id: this.customer.id
            }).then(res => {
                // 拥有者
                this.owners = res.data.owners;
                // 回访历史
                this.visits = res.data.visits;
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.page-header {
    display: flex;
    padding: 20px;
    background: #f6f9fd;
    align-items: center;

    .left {
        flex: 1;
    }

    .right {
        flex: 1;
        text-align: center;
    }

    .right {
        flex: 1;
        text-align: right;
    }
}

.customer-common {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    font-size: 14px;
    background: #f6f9fd;

    .flex-table {
        width: 100%;

        .flex-row {
            display: flex;
            color: #262626;

            .flex-col {
                flex: 1;
                font-size: 13px;
            }

            .flex-col.mobile {
                color: #009cff;
            }

            .flex-col.center {
                text-align: center;
            }

            .flex-col.right {
                text-align: right;
            }
        }

        .flex-row.header {
            font-size: 13px;
            color: #8c8c8c;
            margin-bottom: 8px;
        }
    }
}

.tab-box {
    padding: 20px;
    position: relative;

    .customer-pg {
        position: absolute;
        top: 23px;
        right: 20px;
    }
}
</style>
